/***

THIS CODE HAS BEEN REVAMPED... AGAIN!

IF YOU WANT THE ORIGINAL CSS, GO TO: 
  https://eggramen.neocities.org/code/css/misc/fakewp_old/fakewp2.css

IF YOU WANT THE v2 CSS (i.e. NOT THE ORIGINAL BUT NOT THE CURRENT WIP REVAMP), GO TO: 
  https://eggramen.neocities.org/code/css/misc/fakewp_new/fakewp2_new.css

***/

body {
    background: url(https://backiee.com/static/wallpapers/1000x563/172742.jpg);
    background-size: cover;
    color: white;
    font-family: sans-serif;
    font-size: 1.1em;
    }
    
  center {
    text-align: center;
    }
    
  /*Contains everything*/
  .wrapper {
    
    width: 1250px;
    margin: 0 auto;
    top: 0;
    margin-top: -10px;
    border-left: 0px solid #12282f;
    border-right: 0px solid #12282f;  
    margin-bottom: -10px;
    }
    
  /*Contains main and sidebar divs*/
  .wrapper-2 {
    position: static;
  }
    
  /*Header and footer images*/
  .header, .footer {
    height: 200px;
    overflow: hidden;
    background: url("https://averyonlinearchive.neocities.org/Images/A-Very-Online-Archive-09-05-2025.png"); /*This is the image in the header and footer. Replace it with your own!*/
    background-size:cover;
    background-position: center
    }
    
    
  .footer {
    height: 50px;
    }
    
  .header img {
    border-top: 0px;
    
    }
    
    
  /*Big title at the top of the page.*/  
  .title {
    padding: 50px;
    }
    
  /*Override default margins/padding for headings.*/
  .header h1, .title h2, .title h3 {
    padding: 0;
    margin: 0;
    text-align: center;

    }
  
  /*Container for top row of links.*/
  .links {
    padding: 5px;
    padding-top: 3px;
    padding-bottom: 5px;
    border-radius: 0px 0px 15px 15px;
    background: #6dbbd5
    

    }
    
  /*Div style for individual links.*/
  .link {
    text-align: center;
    display: inline-block;
    float: none;
    font-weight: bold;
    font-size: 1.16em;
    padding: 5px;
    margin-right: 10px;
    margin-left: 10px;
    border: 0px solid red;
    }
    
  .link a {
    color: white;
    text-decoration: none;

    }
  
  /*These three classes are just for defining the boundaries and size of the main and sidebar columns. Most fancy styling goes in the 'box' class.*/
  .main, .sidebar-right {
    display: inline-block;
    }
    
  .sidebar-left, .sidebar-right {
    width: 225px;
    position: absolute;
    top: 0;
    }
  
  .sidebar-left {
    margin-left: 10px;
    }
    
  .main {
    margin-left: 250px;
    width: 1000px;
    }
    
  .sidebar-right {
    margin-right: 10px;
    margin-left: 10px;
    }
    
  /*Box used for individual sections in the sidebar, center column, etc.*/
  .box {  
    padding: 1px 5px 1px 5px;
    background: #fbefe0;
    color: #2e122f;
    border: 5px solid #d05af7;
    margin: 10px 0px 15px 0px;
    text-align: center;
    border-radius: 15px;
    overflow-y: auto;
    max-height: 600px;
    }
    
  /*Prevent overflow of large images in main text areas.*/
  .box img {
    max-width: 100%;
    height: auto;
    }

  /*List style*/
  .ul {
    list-style-image: url('https://bettysgraphics.neocities.org/images/web%20graphics/arrow%20111.gif');
  }
    
  /***
    Not give any style rules by default. Move the padding from the 'box' class here if you want boxes with specially styled headers or images that 
    don't follow the margins of the main text. (For an example of that: see skin #1.)
    ***/
  .inner {
    
    }
    
  /* For narrow screens. Makes the sidebars narrower, and makes width of the 
   * center/main div 50% of the viewport width.
   */
  @media(max-width:1180px) {
    .wrapper {
      width: calc(440px + 50vw);
      }
    .main {
      width: 50vw;
      }
    }
    
  @media(max-width:910px) {
    .wrapper {
      width: calc(360px + 52vw);
      }
    .sidebar-left, .sidebar-right {
      width: 160px;
      }
    .main {
      margin-left: 180px;
      width: 52vw;
      }
    }
    
  /* Mobile compatibility. Puts everything into a standard vertical layout. */
  @media(orientation:portrait) {
    .wrapper {
      width: 96vw;
      margin: 0 auto;
      padding:0;
      position: relative;
      }
    .wrapper-2 {
      width: 94vw;
      margin: 0 auto;
      padding:0;
      position: relative;
      }
    .sidebar-left, .main, .sidebar-right {
      position: relative;
      width: 92vw;
      margin: 0.25rem 1vw;
      }
    .sidebar-left, .sidebar-right {
      font-size: 0.95em;
      }
    }
    /* below, the figure element styles a container of sorts, including both the image and the caption. in this example, it includes a background color, margins, border, etc, as well as a drop shadow for the aesthetics  */
figure {
	border: 2px solid #7d33b6;
	/* the below two lines make your figure inline with the text */
	display: inline-block;
	float: right;
	/* the below two lines control margins associated with the figure; this setup assumes the figure is positioned at the top of the page or section and will meed to be changed if that is not the case. for example, if your figure is in the midst of a block of text, try a 1em setting on all margins except the direction it's floated to, which can have 0em. play with it a bit... */
	margin: 1em;
	margin-top: 0px;
	max-width: 25%; /* this is important - it controls the size of the figure on your page. Feel free to set it to 100%, in which case it will be the same size as your image, but it may look ridiculous. between 40% and 80% works well depending on the size of the container that the figure inhabits */
	padding: 0.4em;
	background: #a839cd;
	text-align: left;
	box-shadow: 2px 2px 0 #868297;
  border-radius: 10px;

}
/* below, of course, styles the image within the figure container */
figure img {
	width: 100%; /* you really ought to leave this at 100%; it simply ensures that the image will fill the entirety of the figure's usable space outside of the caption */
	margin: 2px solid #333;
	padding: 0;
	box-sizing: border-box;
  border-radius: 10px;

}
/* we here begin styling the caption and links within it */
figcaption {
	background-color: #e1f9ff;
  border-radius: 10px;
	color: #181354;
	text-align: center;
	font-size: 1em;
	padding: 0.5em 1em;
	margin-top: 1em;
	border-top: 3px solid #333;
}

figcaption a {
	color: #1c1b30;
	text-decoration: none;
	border-bottom: 3px solid #333;
	transition: 0.3s;
}

figcaption a:hover {
	background-color: #acacac;
}

div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

div.gallery-item {
  margin: 5px;
  border: 1px solid #ccc;
  width: 280px;
}

div.gallery-item:hover {
  border: 1px solid #777;
}

div.gallery-item img {
  width: 100%;
  height: auto;
}

div.gallery-item div.desc {
  padding: 15px;
  text-align: center;
}